<template>
    <div>music{{query}}</div>
    <el-table
    :data="songPlaylist"
    style="width: 100%"
    @cell-mouse-enter='mouseEnter'
    @cell-mouse-leave='mouseLeave'>
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column width="50">
        <template #default="scope">
            <i class="el-icon-video-play" @click="playSong(scope.row)"></i>
        </template>
    </el-table-column>
    <el-table-column
      label="标题"
      width="180">
        <template #default="scope">
            <span class='music-list-title' @click="navToSongPage(scope.row.id)">{{scope.row.name}}</span>
        </template>
    </el-table-column>
    <el-table-column
      label="时长"
      width="180">
      <template #default="scope">
            <span v-show='scope.row.id !== currentMouseIndex' class='music-list-time'>{{scope.row.dt}}</span>
            <span v-show='scope.row.id == currentMouseIndex' class='music-list-time'>
                <i class="el-icon-star-on" @click="starOn(scope.row)"></i>
                <i class="el-icon-folder-add" @click="addToPlayingList(scope.row)"></i>
                <i class="el-icon-delete" @click="deleteFromList(scope.row)"></i>
                <i class="el-icon-download" @click="download(scope.row)"></i>
            </span>
      </template>
    </el-table-column>
    <el-table-column
      label="歌手">
        <template #default="scope">
            <span>
                <template v-for='ar in scope.row.ar' :key="ar.id">
                    <span class='music-list-title' @click="navToArtistPage(ar.id)">{{ar.name+' '}}</span>
                </template>
            </span>
        </template>
    </el-table-column>
    <el-table-column
      label="专辑">
        <template #default="scope">
            <span class='music-list-title' @click="navToAlbumPage(scope.row.id)">
                {{scope.row.name}}
            </span>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    v-model:currentPage="currentPage1"
    :page-size="100"
    layout="total, prev, pager, next"
    :total="1000">
  </el-pagination>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getSongSrc, getPlaylistSong, getPlaylistDetail, getSongDetail, downLoadSong } from '../../api/music'
import { loadUrlSrc } from '../../api/common'
import { player } from '@/utils/player'
export default defineComponent({
    props: {
        query:{
            type: [Number, String],
            default: 1
        }
    },
    beforeRouteUpdate(to, from, next){
        this.showPlaylist(to.query.id)
        next()
    },
    setup(props: any) {
        const router = useRouter()
        const state = reactive({
            songPlaylist: '',
            songId: '',
            currentMouseIndex: 0,
            currentPage1: 5,
            mouseEnter(row: any){
                state.currentMouseIndex = row.id
            },
            mouseLeave(row: any){
                state.currentMouseIndex = -1
            },
            playSong(row: any){
                console.log('播放', row.name)
            },
            navToSongPage(id: string){
                router.push({path: '/song', query: {id:id}})
                console.log(id)
            },
            navToAlbumPage(id: string) {
                router.push({path: '/song', query: {id:id}})
                console.log(id)
            },
            navToArtistPage(id: string){
                router.push({path: '/song', query: {id:id}})
                console.log(id)
            },
            starOn(row: any) {
                console.log('收藏了', row.name)
            },
            async addToPlayingList(row: any) {
                Promise.all([getSongSrc(row.id), getSongDetail(row.id)])
                .then(res => {
                    console.log(res)  
                    if(res[0].data.code === 200 && res[1].data.code === 200){
                        const url = res[0].data.data[0].url
                        const info = res[1].data.songs[0]
                        loadUrlSrc(url).then(res => {
                            console.log(res)
                            player.appendNode(info, res.data)
                        })
                    }
                }, err => {console.log(err)})   
                console.log(row.name, '加入播放列表')
            },
            deleteFromList(row: any) {
                console.log(row.name, '已从歌单中删除')
            },
            download(row: any){
                console.log('正在下载歌曲', row.title)
                getSongSrc(row.id).then( res => {
                    downLoadSong(res.data.data[0].url, row.title)
                })
            },
            handleSizeChange(val: any) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val: any) {
                console.log(`当前页: ${val}`);
            }
        })
        onMounted(() => {
            showPlaylist(props.query)
        })
        const showPlaylist = async(id: any) => {
            const res = await getPlaylistDetail(id)
            const trackIds: Array<any> = res.data.playlist.trackIds
            let ids = ''
            for(let i = 0; i< trackIds.length; i++){
                if(i === trackIds.length-1){
                    ids += trackIds[i].id
                }else{
                    ids += trackIds[i].id + ','
                }
            }
            const detail = await getSongDetail(ids)
            console.log(detail.data.songs)
            state.songPlaylist = detail.data.songs
        }
        return {
            ...toRefs(state),
            getPlaylistSong,
            showPlaylist
        }
    },
    methods: {
        
    }
})
</script>
<style scoped>
.music-list-title:hover{
    cursor: pointer;
    border-bottom: 1px solid #000;
}
i{
    font-size: 20px;
    margin-right: 8px;
}
i:hover{
    color: #000;
}
</style>